<template>
  <div class="home-container">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card class="welcome-card">
          <template #header>
            <div class="card-header">
              <span>欢迎使用</span>
              <el-button class="button" type="primary" @click="goToReservation">开始预约</el-button>
            </div>
          </template>
          <div class="card-content">
            <h2>智能会议室预约系统</h2>
            <p>为您提供便捷的会议室预约服务</p>
            <ul class="features-list">
              <li><el-icon><Check /></el-icon>实时查看会议室状态</li>
              <li><el-icon><Check /></el-icon>快速预约流程</li>
              <li><el-icon><Check /></el-icon>历史预约记录</li>
              <li><el-icon><Check /></el-icon>智能提醒服务</li>
            </ul>
          </div>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card class="stats-card">
          <template #header>
            <div class="card-header">
              <span>系统统计</span>
            </div>
          </template>
          <div class="stats-content">
            <el-row :gutter="20">
              <el-col :span="6">
                <div class="stat-item">
                  <h3>会议室总数</h3>
                  <p>{{ MeetingRoomTotalNumber }}</p>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="stat-item">
                  <h3>今日预约</h3>
                  <p>{{ TodayReservationNumber }}</p>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="stat-item">
                  <h3>空闲会议室</h3>
                  <p>{{ FreeRoomNumber }}</p>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="stat-item">
                  <h3>使用率</h3>
                  <p>{{ UtilizationRate }}%</p>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { Check } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { ref } from 'vue'

const router = useRouter()
const MeetingRoomTotalNumber = ref(0)
const TodayReservationNumber = ref(0)
const FreeRoomNumber = ref(0)
const UtilizationRate = ref(0)


const goToReservation = () => {
  router.push('/main/reservation')
}

</script>

<style scoped>
.home-container {
  padding: 20px;
}

.welcome-card {
  height: 100%;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-content {
  text-align: center;
  padding: 20px;
}

.features-list {
  list-style: none;
  padding: 0;
  margin-top: 20px;
}

.features-list li {
  margin: 10px 0;
  display: flex;
  align-items: center;
}

.features-list li .el-icon {
  margin-right: 10px;
  color: #67C23A;
}

.stats-card {
  height: 100%;
}

.stats-content {
  padding: 20px;
}

.stat-item {
  text-align: center;
  padding: 15px;
  border-radius: 4px;
  background: #f5f7fa;
}

.stat-item h3 {
  margin: 0 0 10px 0;
  color: #909399;
}

.stat-item p {
  margin: 0;
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}
</style>
